<template>
	<view class="box">
		<!-- 轮播 -->
		<view class="banner">
			<swiper indicator-dots="true" indicator-color="#FFFFFF" indicator-active-color="#DD5040" autoplay="true"
				circular="false" style='height: 400rpx;'>
				<block v-for="(item, index) in imgList" :key="index">
					<swiper-item style="width: 100%; height: 100%;">
						<view class="swiper-item">
							<image mode="aspectFit" :src="item.url"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 场馆信息 -->
		<view class="box_info">
			<view class="box_info_top">
				<view class="box_info_top_left">
					<text>{{info.name}}</text>
					<text>营业时间：{{info.openTimeStart}} ~ {{info.openTimeEnd}}</text>
				</view>
				<view v-if="info.telephone" class="box_info_top_right">
					<view class="box_info_top_right_k" @click="lxkd">
						<image src="@/static/icon/changguan_ic_kefu.png"></image>
						<text>客服</text>
					</view>
					<view class="box_info_top_right_k"
						@click="navigation(info.latitudeLongitude, info.name, info.detailedAddress)">
						<image src="@/static/icon/changguan_ic_daohang.png"></image>
						<text>导航</text>
					</view>
				</view>
			</view>
			<view class="box_info_button">
				<u-icon name="map" color="#666666" size="26rpx"></u-icon>
				<text>{{info.detailedAddress}}</text>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="box_x"></view>
		<!-- 设施 -->
		<view class="box_ss">
			<text class="box_ss_title">场馆设施</text>
			<view class="box_ss_list">
				<view class="box_ss_list_item" v-for="(item, index) in facilitiesList" :key="index">
					<image :src="item.configPicture"></image>
					<text>{{item.configName}}</text>
				</view>
				<view class="box_ss_list_items"></view>
				<view class="box_ss_list_items"></view>
				<view class="box_ss_list_items"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				list: [],
				facilitiesList: [],
				imgList: []
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.title
			})
			// 请求场馆详情
			this.getVenueInfo(options.id)
		},
		methods: {
			lxkd() {
				uni.makePhoneCall({
					phoneNumber: this.info.telephone,
				})
			},
			navigation(options, name, address) {
				let data = options.split(',')
				uni.openLocation({
					longitude: Number(data[0]),
					latitude: Number(data[1]),
					name,
					address,
					success(a) {
						console.log('success', a);
					},
					fail(b) {
						console.log('fail', b);
					}
				})
			},
			getLocal(latitude, longitude) {
				this.$app.ajax({
					data: {
						param: {
							lat: latitude,
							log: longitude
						}
					},
					api: this.$api.getCity()
				}).then((res) => {
					this.city = res.record.city
				});
			},
			getVenueInfo(id) {
				this.$app.ajax({
					data: {
						param: {
							id: id
						}
					},
					api: this.$api.getVenueInfo()
				}).then((res) => {
					let arr = []
					if (res.record.showPictures) {
						var piclist = res.record.showPictures.split(',')
						for (let i = 0; i < piclist.length; i++) {
							let obj = {
								url: piclist[i]
							}
							arr.push(obj)
						}
					}
					if (res.record.facilitys && res.record.facilitys.length != 0) {
						var facilitiesList = []
						for (let i = 0; i < res.record.facilitys.length; i++) {
							if (res.record.facilitys[i].isChosed == 1) {
								facilitiesList.push(res.record.facilitys[i])
							}
						}
					}
					this.info = res.record
					this.imgList = arr
					this.facilitiesList = facilitiesList
					this.list = res.record.facilitys ? res.record.facilitys : []
				})
			},
		}
	};
</script>

<style lang="scss">
	.box {
		padding-top: 20rpx;
	}

	.box_info {
		padding: 0 30rpx 30rpx 30rpx;
		box-sizing: border-box;
	}

	.box_info_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box_info_top_left {
		display: flex;
		flex-direction: column;
	}

	.box_info_top_left text:nth-child(1) {
		font-size: 36rpx;
		font-weight: 500;
		color: #222222;
	}

	.box_info_top_left text:nth-child(2) {
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 24rpx;
	}

	.box_info_top_right {
		display: flex;
	}

	.box_info_top_right_k {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-left: 48rpx;
	}

	.box_info_top_right_k image {
		width: 44rpx;
		height: 44rpx;
	}

	.box_info_top_right_k text {
		font-size: 22rpx;
		font-weight: 400;
		color: #666666;
		margin-top: 16rpx;
	}

	.box_info_button {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}

	.box_info_button text {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		margin-left: 4rpx;
	}

	.box_x {
		height: 24rpx;
		background: #F7F7F7;
	}

	.box_ss {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.box_ss_title {
		font-size: 32rpx;
		font-weight: 500;
		color: #222222;
	}

	.box_ss_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 32rpx;
	}

	.box_ss_list_item {
		width: calc(100% / 5);
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.box_ss_list_items {
		width: calc(100% / 5);
	}

	.box_ss_list_item image {
		width: 88rpx;
		height: 88rpx;
	}

	.box_ss_list_item text {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.banner {
		width: calc(100% - 40rpx);
		height: 400rpx;
		margin: 0 20rpx 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swiper-items {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
	}

	.swiper-item image {
		width: 100%;
	}
</style>